<template>
    <view class="content-warpper">
        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
			:indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" @change="change">
			<swiper-item v-for="(banner,index1) in data" :key="index1">
				<image style="width: 750upx; height: 280upx; background-color: #eeeeee;" :src="resourceHostPic + banner.picUrl" 
					mode="scaleToFill" @click="click(index1)" @error="imageError"></image>
			</swiper-item>
		</swiper>
		<view class="index-warpper" v-if="data.length >= 1">
			<view v-for="(item, index2) in data" :key="index2" :class="['index-point', index2 == index ? 'index-point-active' : '']" ></view>
		</view>
    </view>
</template>

<script>
	//import api from '../common/api.js';
	//var resource = api.getResource;
    export default {
        props: {
            data: {
                type: Array,
                default: function(e) {
                    return {}
                }
            },
			resourceHostPic: {
				type: String,
				default: function(e){
					return ''
				}
			}
        },
		data() {
			return {
				// resourceHostPic: '',
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicatorColor: '#73000000',
				indicatorActiveColor: '#f2f2f2',
				index: 0,
			}
        },
		created() {
			//this.resourceHostPic = resource;
		},
        methods: {
			change: function (e){
				//console.log('change data=' + JSON.stringify(e));
// 				uni.showToast({
// 					title: JSON.stringify(e),
// 					duration: 2000
// 				});
				this.index = e.mp.detail.current
				//console.log('change index=' + this.index);
			},
            click(index) {
				uni.showToast({
					title: '你点击了第' + (index + 1) + '张banner',
					duration: 2000
				});
                //this.$emit('bannerClick');
            },
        }
    }
</script>

<style>
    view {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

	.content-warpper{
		position: relative;
	}
    .swiper {
        width: 750upx;
		height: 280upx;
        padding: 0upx;
		margin: 0upx;
    }
	.index-warpper{
		position:absolute;
		width: 750upx;
		left:0px;
		bottom:10px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.index-point{
		margin-left: 3upx;
		margin-right: 3upx;
		width: 24upx;
		height: 6upx;
		background: #000000;
		opacity: 0.4;
		border-radius: 3upx;
	}
	.index-point-active{
		background: #ffffff;
		opacity: 1;
	}
     
</style>
